// import React, {Component, useState} from "react";
// import ReactDOM from "react-dom";
import ReactDOM,  { useState } from "./dreact/react-dom";
import Component from "./dreact/component";
import './index.css';

class ClassComponent extends Component {
  render() {
    return (
      <div className="border">
        <p>{this.props.name}</p>
      </div>
    );
  }
}

function FunctionComponent(props) {
  const [count, setCount] = useState(0)
  const [double, setDouble] = useState(1)
  return (
    <div className="border">
      <button
        onClick={() => {
          setCount(count+1)
        }}>
        {count}
      </button>
      <button
        onClick={() => {
          setDouble(double * 2)
        }}>
        {double}
      </button>
    </div>
  );
}

// key值标记节点在当前层级上的唯一性
function FragmentComponent() {
  return (
    <>
      <li>哈哈</li>
      <li>哈哈</li>
    </>
  )
}

const jsx = (
  <div className="border">
    <h1>源码学习</h1>
    <a href="https://www.baidu.com/">百度</a>
    <FunctionComponent name="function" />
     <ClassComponent name="class" />
    <ul>
      <FragmentComponent />
    </ul>
  </div>
);

console.log("jsx", jsx)
ReactDOM.render(jsx, document.getElementById("root"));
